<!DOCTYPE html>
<html>
  <head>
    <title>Google Visualization</title>
    <link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
    <link rel="stylesheet" href="demo.css">
  </head>

  <body>

    <div id="header">
      <h1 id="title">jQuery-CSV + Google Visualization API</h1>
      <div id="link"><a href="https://github.com/typeiii/jquery-csv">GitHub</a></div>
    </div>
    <div id="container">
      <section id="content">
        <h2>Description</h2>
        <p>Google Visualization API is a powerful too used to generate graphs in Javascript.</p>
        <p>This Demo generates a basic scatter plot CSV as the input data.</p>
        <hr>
        <h2>Load File</h2>
        <span>sample.csv</span>
        <input id="load-file" type="button" value="Load File" />
        <hr />
        <h2>Load Data</h2>
        <textarea id="input" style="height: 250px;">"TimeStamp (ms)","MID 128|PID 91|Accelerator pedal position (%)","MID 128|PID 92|Engine load(%)","MID 128|PID 100|Engine oil pressure (bar)","MID 128|PID 105|Intake manifold temperature (N0C)","MID 128|PID 110|Engine coolant temperature (N0C)","MID 128|PID 190|Engine speed (r/min)"
115,10.4,0,0,0,0,0
175,,40,,,,
309,,,4.55,,,
529,,,,17,,
630,,,,,46,
682,,,,,,1011.25
751,10.4,,,,,
803,,40,,,,
856,,,4.55,,,
921,,,,17,,
1013,,,,,46,
1521,,,,,,1016.5
1593,10.4,,,,,
1641,,39,,,,
1704,,,4.58,,,
1761,,,,17,,
1832,,,,,46,
1897,,,,,,1023
1961,10.4,,,,,
2025,,37,,,,
2088,,,4.58,,,
2145,,,,17,,
2217,,,,,46,
2283,,,,,,1022.25
2344,10.4,,,,,
2408,,36,,,,
2464,,,4.58,,,
2576,,,,17,,
2633,,,,,46,
2698,,,,,,1001
2767,10.4,,,,,</textarea>
        <input id="load-data" type="button" value="Load" />
        <hr />
        <h2>Plot</h2>
        <div id="dashboard">
          <div id="chart"></div>
          <div id="control"></div>
          <input id="edit" type="button" value="Edit Chart" />
        </div>
        <hr />
        <h2>Data</h2>
        <textarea id="result" style="height: 250px;"></textarea>
      </section>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="../src/jquery.csv.js"></script>
    <script src="http://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['controls', 'charteditor']}]}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
    <script>
      // enable syntax highlighting
      hljs.initHighlightingOnLoad();

      $('#load-file').bind('click', function () {
        loadFile();
      });

      $('#load-data').bind('click', function() {
        loadData();
      });

      function loadFile() {
        var file = 'data/sample2.csv';
        $.get(file, function(csv) {
            var data = $.csv.toArrays(csv, {
              onParseValue: $.csv.hooks.castToScalar
            });
            plot(data);
            $('#result').empty();
            $('#result').html(JSON.stringify(data, null, 2));
        });
      }

      function loadData() {
        var csv = $('#input').val();
        var data = $.csv.toArrays(csv, {
          onParseValue: $.csv.hooks.castToScalar
        });
        plot(data);
        $('#result').empty();
        $('#result').html(JSON.stringify(data, null, 2));
      }

      function plot(data) {
        var data = new google.visualization.arrayToDataTable(data);
        var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
        var control = new google.visualization.ControlWrapper({
          controlType: 'ChartRangeFilter',
          containerId: 'control',
          options: {
            filterColumnIndex: 0,
            ui: {
              chartOptions: {
                height: 50,
                width: 800,
                chartArea: {
                  width: '50%'
                },
              },
              chartView: {
                columns: [0, 1]
              }
            }
          }
        });

        var chart = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          containerId: 'chart',
        });

        function fixOptions(wrapper) {
          // sets the options on the chart wrapper so that it draws correctly
          wrapper.setOption('height', 300);
          wrapper.setOption('width', 800);
          wrapper.setOption('chartArea.width', '60%');
          // the chart editor automatically enables animations, which doesn't look right with the ChartRangeFilter
          wrapper.setOption('animation', null);
          // the chart editor sets hAxis.viewWindowMode to 'pretty', which doesn't work well with continuous axes
          wrapper.setOption('hAxis.viewWindowMode', 'maximized');
          wrapper.setOption('curveType', 'function');
        }

        fixOptions(chart);

        document.getElementById('edit').onclick = function() {
          var editor = new google.visualization.ChartEditor();
          google.visualization.events.addListener(editor, 'ok', function() {
            chart = editor.getChartWrapper();
            fixOptions(chart);
            dash.bind([control], [chart]);
            dash.draw(data);
          });
          editor.openDialog(chart);
        };
        
        dash.bind([control], [chart]);
        dash.draw(data);
      }
    </script>
  </body>
</html>
